<template>
    <div>
        <section class="content clearfix">
            <div class="c-top">
                <div class="title">关键指标</div>
                <ul>
                    <li>
                        <p>今日事件（项）</p>
                        <p>
                            <b>{{eventNumAndRateData.numEvent}}</b>
                        </p>
                        <p>
                            <span>日</span>
                            <i class="fa fa-long-arrow-up" aria-hidden="true" v-if="parseFloat(this.eventNumAndRateData.numEventRate) > 0"></i>
                            <i class="fa fa-long-arrow-down" aria-hidden="true" style="color:green" v-if="parseFloat(this.eventNumAndRateData.numEventRate) < 0"></i>
                            <i class="fa fa-minus" aria-hidden="true" style="color:green" v-if="parseFloat(this.eventNumAndRateData.numEventRate) == 0"></i>
                            <span>{{eventNumAndRateData.numEventRate}}</span>
                        </p>
                    </li>
                    <li v-for="item in eventNumAndRateData.list" :key="item.value">
                        <p>{{item.eventName}}（项）</p>
                        <p>
                            <b>{{item.numEvent}}</b>
                        </p>
                        <p>
                            <span>日</span>
                            <i class="fa fa-long-arrow-up" aria-hidden="true" v-if="parseFloat(item.numEventRate) > 0"></i>
                            <i class="fa fa-long-arrow-down" aria-hidden="true" style="color:green" v-if="parseFloat(item.numEventRate) < 0"></i>
                            <i class="fa fa-minus" aria-hidden="true" style="color:green" v-if="parseFloat(item.numEventRate) == 0"></i>
                            <span>{{item.numEventRate}}</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="c-middle clearfix">
                <div class="col-md-4" style="background:white;height:300px;">
                    <div class="grid-content" style="padding-top:40px;">
                        <div class="middle-left" v-for="item in acceptEventsData.list" :key="item.value">
                            <i class="fa fa-check-circle" aria-hidden="true" style="color:#00a854"></i> {{item.eventType}}事件{{item.eventNum}}项</div>
                        <div class="middle-left">
                            <i class="fa fa-times-circle" aria-hidden="true" style="color:#f04134"></i> 已超时事件{{acceptEventsData.overtimeEvent}}项</div>
                    </div>
                </div>
                <div class="col-md-4 mid-middle">
                    <div class="grid-content bg-purple-light clearfix">
                        <div class="col-md-6">
                            <p>处理及时率</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <el-progress type="circle" :percentage="ratio" :width="120" :color="'#108EE9'" :stroke-width="10" style="font-size:50px;"></el-progress>
                        </div>
                    </div>
                    <div class="people clearfix">
                        <div class="image clearfix">
                            <div class="rate" :style="{width:busyRatio+'%'}"></div>
                            <div class="imgcontent clearfix">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt="">
                                <img :src="require('_SYS/img/people11.png')" alt=""></div>

                        </div>
                        <div class="clearfix">
                            <span style="float:left">忙碌{{busyRatio}}%</span>
                            <span style="float:right">闲置{{100-busyRatio}}%</span>
                        </div>
                        <div class="progress1">
                            <div class="progress2" :style="{width:busyRatio+'%'}"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" style="background:white;height:300px;">
                    <div class="grid-content" style="background:white">
                        <div id="echartContainer" style="width:100%; height:250px;background:white"></div>
                    </div>
                </div>
            </div>
            <div class="c-bottom clearfix" style="overflow:hidden;padding-top:20px;padding-left:5%;">
                <div class="col-md-2 con-bottom" style="color:#101010">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventCreate}}</b>
                        </p>
                        <p>
                            <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已创建</p>
                    </div>
                    <div class="col-md-8 con">
                        <span>{{dot}}</span>
                    </div>
                </div>
                <div class="col-md-2 con-bottom" style="color:#ff9800">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventDistribute}}</b>
                        </p>
                        <p>
                            <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已派发</p>
                    </div>
                    <div class="col-md-8 con">
                        <span>{{dot}}</span>
                    </div>
                </div>
                <div class="col-md-2 con-bottom" style="color:#ff5f00">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventNotarize}}</b>
                        </p>
                        <p>
                            <i class="fa fa-calendar-check-o" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已确认</p>
                    </div>
                    <div class="col-md-8 con">
                        <span>{{dot}}</span>
                    </div>
                </div>
                <div class="col-md-2 con-bottom" style="color:#e51c23">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventDispose}}</b>
                        </p>
                        <p>
                            <i class="fa fa-hand-paper-o" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已处理</p>
                    </div>
                    <div class="col-md-8 con">
                        <span>{{dot}}</span>
                    </div>
                </div>
                <div class="col-md-2 con-bottom" style="color:#259b24">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventAudit}}</b>
                        </p>
                        <p>
                            <i class="fa fa-check-square-o" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已审核</p>
                    </div>
                    <div class="col-md-8 con">
                        <span>{{dot}}</span>
                    </div>
                </div>
                <div class="col-md-2 con-bottom" style="color:#3f40b5">
                    <div class="col-md-4">
                        <p>
                            <b>{{eventStateData.eventCallback}}</b>
                        </p>
                        <p>
                            <i class="fa fa-phone" aria-hidden="true"></i>
                        </p>
                        <p class="hang">已回访</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>

export default {
    data() {
        let timer = null;

        return {
            eventNumAndRateData: [],
            acceptEventsData: [],
            eventStateData: [],
            eventRatioData: [],
            dot: "•　•　•　•　•　•　•　>",
            ratio: 0,
            busyRatio: 0,
            radioData: [],
        };
    },
    mounted() {
        this.getEventNumAndRate();
        this.getAcceptEvents();
        this.getEventState();
        this.getTimeAndBusyRatio();
        let myChart = echarts.init(document.getElementById("echartContainer"));
        this.getEventRatio(() => {
            this.getRadioData();
            myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}"
                },
                series: [
                    {
                        name: "事件占比",
                        type: "pie",
                        radius: [20, 110],
                        roseType: "area",
                        data: this.radioData
                    }
                ]
            });
        });
        this.timer = setInterval(() => {
            this.radioData = []
            this.getEventNumAndRate();
            this.getAcceptEvents();
            this.getEventState();
            this.getTimeAndBusyRatio();
            // let myChart = echarts.init(document.getElementById("echartContainer"));
            this.getEventRatio(() => {
                this.getRadioData();
                myChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}"
                    },
                    series: [
                        {
                            name: "事件占比",
                            type: "pie",
                            radius: [20, 110],
                            roseType: "area",
                            data: this.radioData
                        }
                    ]
                });
            });
        }, 60000)
    },
    methods: {
        getEventNumAndRate() {
            this.$api.ticket.home.eventNumAndRate().then(res => {
                if (res.success) {
                    // console.log(res)
                    this.eventNumAndRateData = res.data;
                }
            });
        },
        getAcceptEvents() {
            this.$api.ticket.home.acceptEvents().then(res => {
                if (res.success) {
                    // console.log(res)
                    this.acceptEventsData = res.data;
                }
            });
        },
        getEventState() {
            this.$api.ticket.home.eventState().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.eventStateData = res.data;
                }
            });
        },
        getEventRatio(callback) {
            this.$api.ticket.home.eventRatio().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.eventRatioData = res.data;
                    callback();
                }
            });
        },

        getTimeAndBusyRatio() {
            this.$api.ticket.home.timeAndBusyRatio().then(res => {
                if (res.success) {
                    // console.log(res.data);
                    this.ratio = parseFloat(res.data['处理及时率']) || 0;
                    this.busyRatio = parseFloat(res.data['忙碌率']) || 0;
                }
            });
        },
        getRadioData() {
            for (let item in this.eventRatioData) {
                let msg = { value: 0, name: '' }
                // console.log(this.eventRatioData[item])
                msg.value = this.eventRatioData[item].replace(/%/, "");
                msg.name = item + this.eventRatioData[item]
                this.radioData.push(msg)
            }
            // console.log(this.radioData)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    }

};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  .title {
    height: 40px;
    line-height: 20px;
    padding: 9px 14px 8px 14px;
    font-size: 16px;
    background-color: rgba(249, 249, 249, 1);
    border: 1px solid rgba(238, 238, 238, 1);
  }
  .c-top {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    border: 1px solid #eeeeee;
    ul {
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    li {
      width: 11.11%;
      height: 160px;
      list-style: none;
      float: left;
      border: 1px solid #eeeeee;
      background: #ffffff;
      padding-top: 32px;
      padding-left: 21px;
      b {
        font-size: 30px;
      }
      i {
        color: red;
        font-size: 20px;
      }
    }
    span {
      display: inline-block;
      line-height: 30px;
    }
    i {
      vertical-align: middle;
    }
  }
  .c-middle {
    margin-top: 46px;
    .middle-left {
      margin-left: 46px;
      width: 346px;
      height: 34px;
      line-height: 34px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0);
      box-shadow: 0px 0px 8px 0px rgba(170, 170, 170, 1);
      border: 1px solid rgba(255, 243, 207, 1);
      margin-bottom: 15px;
      i {
        display: inline-block;
        width: 50px;
        text-align: center;
        font-size: 26px;
        line-height: 34px;
        float: left;
      }
    }
    .mid-middle {
      background: white;
      height: 300px;
      box-sizing: border-box;
      border-left: 10px solid #ecf0f5;
      border-right: 10px solid #ecf0f5;
      p {
        display: inline-block;
        width: 71px;
        height: 29px;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        margin-top: 34px;
      }
      .people {
        margin-left: 20px;
        position: relative;
        width: 380px;
        .image {
          background: #ecf0f5;
          min-width: 10px;
          position: relative;
        }
        .rate {
          position: absolute;
          height: 100%;
          background: green;
        }
        .progress1 {
          height: 5px;
          width: 100%;
          background: #ecf0f5;
          border-radius: 5px;
        }
        .progress2 {
          height: 5px;
          background: green;
          border-radius: 5px;
        }
        img {
          float: left;
          z-index: 999;
        }
        .imgcontent {
          position: relative;
          img {
            width: 10%;
            height: 10%;
          }
        }
      }
    }
  }

  .con-bottom {
    padding-left: 0px;
    padding-right: 0px;
    p {
      line-height: 30px;
      font-size: 16px;
      text-align: center;
    }
    i {
      font-size: 32px;
    }
    b {
      font-size: 26px;
      line-height: 38px;
    }
    .con {
      line-height: 115px;
      color: darkgray;
      overflow: hidden;

      span {
        white-space: nowrap;
        float: right;
      }
    }
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 20px 0;
  i {
    font-size: 20px;
  }
}
</style>